﻿<template>
  <section>
    <div class="carousel">
      <el-carousel
        :interval="4000"
        :height="height"
        indicator-position="none"
        :autoplay="false"
        ref="carouselDto"
        class="carousel-dto"
        v-if="imgs.length"
      >
        <el-carousel-item
          v-for="(item1, index1) in imgs"
          :key="index1"
          :name="index1.toString()"
        >
          <img
            :src="item1.img"
            alt=""
            :style="{ height }"
            @click="handleRouteDto(item1)"
          />
        </el-carousel-item>
      </el-carousel>
      <div class="carousel-label">
        <el-button
          type="text"
          icon="el-icon-arrow-left"
          @click="handlePrev"
          v-if="imgs.length"
        ></el-button>
        <div id="carousel-label-imgs">
          <div :style="{ transform: 'translateX(' + currentOffset + 'px)' }">
            <img
              :src="item2.img"
              v-for="(item2, index2) in imgs"
              :key="index2"
              @click="handleControl(index2)"
              :style="{ minWidth: width }"
            />
          </div>
        </div>
        <el-button
          type="text"
          icon="el-icon-arrow-right"
          @click="handleNext"
          v-if="imgs.length"
        ></el-button>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "comCarousel",
  components: {},
  props: {
    imgs: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //dto
    height: {
      type: String,
      default: "400px",
    },
  },
  computed: {},
  watch: {},
  data() {
    return {
      currentOffset: 0,
      width: "",
      fatherWith: 0,
    };
  },
  mounted() {
    console.log(this.imgs,"imgs")
    this.setCardWidth();
    window.addEventListener("resize", () => {
      this.currentOffset = 0;
      this.setCardWidth();
    });
  },
  methods: {
    setCardWidth() {
      const father = document.getElementById("carousel-label-imgs");
      this.fatherWith = father.clientWidth;
      this.width = (this.fatherWith - 20) / 8 + "px";
    },

    handleNext() {
      if (this.currentOffset <= (-(this.fatherWith - 20) / 8) * (10 - 8))
        return;
      this.currentOffset -= (this.fatherWith - 20) / 8;
    },
    handlePrev() {
      if (this.currentOffset >= -2) return;
      this.currentOffset += (this.fatherWith - 20) / 8;
    },
    handleControl(v) {
      this.$refs.carouselDto.setActiveItem(v);
    },
    handleRouteDto(v) {
      this.$emit("routeDto", v);
    },
  },
};
</script>

<style scoped lang="less">
.carousel {
  display: flex;
  flex-direction: column;
  height: 100%;
  &-label {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    > div {
      overflow: hidden;
      > div {
        display: flex;
        transition: all 0.2s;
        > img {
          height: 60px;
          margin: 0 2px;
        }
      }
    }
    > button {
      color: #fff;
      height: 60px;
      width: 30px;
      background-color: #d7d7d7;
      &:nth-child(2) {
        left: -5px;
        margin-right: 2px;
      }
      &:nth-child(3) {
        right: -5px;
        margin-left: 2px;
      }
    }
  }
  img {
    cursor: pointer;
  }
}
[class^="el-icon-arrow-"] {
  font-size: 22px;
  padding: 10px 0;
  background-color: rgba(0, 0, 0, 0);
}
</style>
<style lang="less">
.el-carousel__item {
  text-align: center;
}
</style>